<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>控制元素显示和隐藏示例</title>
  <style>
    /* 为了演示效果，给通知添加简单样式 */
    .notice {
      padding: 10px;
      background-color: #dff0d8;
      color: #3c763d;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>图书馆开放状态</h2>
    <!-- 使用 v-if 显示或不显示通知 -->
    <div v-if="isLibraryOpen" class="notice">
      图书馆开放中（v-if）
    </div>
    <!-- 使用 v-show 隐藏或显示通知 -->
    <div v-show="isLibraryOpen" class="notice">
      图书馆开放中（v-show）
    </div>
    <button @click="toggleLibrary">切换图书馆状态</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        // 模拟图书馆是否开放，初始为 true 表示开放
        isLibraryOpen: true
      },
      methods: {
        toggleLibrary: function() {
          // 切换图书馆状态：开放变关闭，关闭变开放
          this.isLibraryOpen = !this.isLibraryOpen;
        }
      }
    });
  </script>
</body>
</html>
